<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/jquery.js"></script>

    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<table class="layui-hide" id="test" lay-filter="table"></table>

<script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="detail">详情</a>
        <a class="layui-btn layui-btn-dange layui-btn-sm" lay-event="update">编辑</a>
        <a class="layui-btn layui-btn-warm layui-btn-sm" lay-event="delete">删除</a>
</script>

<script src="./layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
    layui.use(['table','jquery','util','laypage'], function(){
        var table = layui.table;
        var util = layui.util;
        var laypage = layui.laypage;
        table.render({
            elem: '#test'
            ,url:'http://api.version.com/feedbacks',
            page:{
                limit:3,
                limits:[3,6,9,12,15],
            },
            height:300
                //,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {field:'id', width:60, title: 'ID', sort: true}
                ,{field:'name', width:100, title: '用户名',edit:"text"}
                ,{field:'phone', width:100, title: '手机', sort: true}
                ,{field:'sex', width:80, title: '性别',
                    templet: function(d){
                        return d.sex ? '男':'女'
                    }
                }
                ,{field:'skill', title: '技能',} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                ,{field:'opinion', title: '意见'}
                ,{field:'create_at', sort: true, title: '时间',
                    templet: function(d){
                       return util.toDateString(d.create_at,'yyyy-mm-dd HH:mm:ss');
                    }
                }
                ,{field:'right', align:'center',toolbar: '#barDemo'}
            ]]
        });
        table.on('edit(table)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            console.log(obj.value); //得到修改后的值
            console.log(obj.field); //当前编辑的字段名
            console.log(obj.data); //所在行的所有相关数据

            $.ajax({
                type:'post',
                url:'http://api.version.com/feedbacks/'+obj.data.id,
                data:{
                    _method:'put',
                    field:obj.field,
                    value:obj.value,
                },
                dataType:'json',
                contentType:'application/x-www-form-urlencoded',
                success:function(response) {
                    console.log(response);
                }
            });
        });
        //监听行单击事件
        table.on('tool(table)', function(obj){
            $event = obj.event;
            switch($event) {
                case 'delete':
                    layer.confirm('realy delete ?' ,function(index) {
                        $.ajax({
                            type:'post',
                            url:'http://api.version.com/feedbacks/'+obj.data.id,
                            data:{
                                _method:'delete',
                            },
                            async:true,
                            dataType:'json',
                            contentType:'application/x-www-form-urlencoded',
                            success:function(response) {
                                console.log(response);
                                if(response.code == 0){
                                    layer.msg(response.msg);
                                }else{
                                    layer.msg(response.msg);
                                }
                            }
                        });
                        obj.del();
                        layer.close(index);
                    });
                break;
                case 'update':
                    console.log(obj.data);
                break;
            }


        });
    });

</script>

</body>
</html>